<template>
	<view class="content">
		<view v-if="itemList.length>4" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-right: 20rpx;">
			<view v-for="(item, index) in itemList.slice(0, 4)" :key='index'
			style="display: flex;flex-direction: row;background-color: #fff;align-items: center;margin-left: 16rpx;margin-top: 20rpx;padding: 16rpx 0;">
				<image :src="item.skuCoverUrl||item.itemCoverUrl" mode='aspectFill' style="width: 130rpx;height: 130rpx;"></image>
			</view>
			<view style="margin-left: 30rpx;">共{{itemList.length}}件</view>
			<u-icon name="arrow-right" color="#999" size="15"></u-icon>
		</view>
		<view v-else>
			<view v-for="(item, index) in itemList" :key='index'
			style="display: flex;flex-direction: row;;background-color: #fff;align-items: center;width: 710rpx;margin-left: 20rpx;margin-top: 20rpx;padding: 16rpx 0;">
				<view style="display: flex;flex-direction: row;">
					<image :src="item.skuCoverUrl||item.itemCoverUrl" mode='aspectFill' style="width: 160rpx;height: 160rpx;"></image>
					<view style="margin-left: 16rpx;width: 510rpx;">
						<view style="font-size: 30rpx;color: #000;">{{item.itemModel.name}}</view>
						<view style="font-size: 28rpx;margin-top: 10rpx;color: #666;" class='limitLineNumOfOne'>{{item.specs_sel}}</view>
						<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 20rpx;margin-right: 16rpx">
							<view style="margin-top: 10rpx;color: #fa3534;font-size: 30rpx;">¥{{item.skuModel.costPrice}}</view>
							x{{item.payCount}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		components: {},
		props:{
			itemList: {
				type: Array,
				default: ()=>[]
			},
		},
		data() {
			return {
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="scss">
	
</style>
